<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>课程详情</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="icon/iconfont.css"/>
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css"/>
    <style>
        .bottom-line:after{content: '';position: absolute;left: 0;bottom: 0;right: auto;top: auto;height: 1px;width: 100%;background-color: #454545;
            display: block;z-index: 0;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;transform: scale(1,.5);-webkit-transform: scale(1,.5);
        }
        .swiper-slide img{display: block;width: 100%;}
        .title{padding: 0.65rem 0.5rem;color: #929292;font-size: 0.7rem;background-color: #28282e;}
        .left-time{overflow: hidden;padding: 0.5rem;background-color: #323238;}
        .left-time .left{float: left;overflow: hidden;margin-top: 0.4rem;}
        .left-time .left p{float: left;line-height: 1.2rem;color: #fff;font-size: 0.65rem;}
        .left-time .left .timing{float: left;font-size: 0.6rem;color: #fff;margin-left: 0.5rem;}
        .left-time .left .timing span{display: inline-block;width: 1.2rem;height: 1.2rem;background-color: #fbb701;line-height: 1.2rem;text-align: center;border-radius: 0.2rem;}
        .left-time .right{float: right;}
        .left-time .right span{display: block;color: #fff;font-size: 0.6rem;text-align: center;margin-top: 0.25rem;}
        .progress{background-color: #a77d0e;width: 3rem;;height: 1rem;border-radius: 1rem;position: relative;padding: 0.1rem;}
        .progress p{color: #fff;font-size: 0.6rem;position: absolute;left: 0;top: 0;width: 100%;line-height: 1rem;text-align: center;}
        .progress-bar{width: 40%;height: 0.8rem;background-color: #ffba00;border-radius: 1rem;}
        .content{padding:0.8rem 0.5rem 0.5rem;}
        .content-title{font-size: 0.8rem;color: #eee;}
        .content-detail{line-height: 1rem;margin-top: 0.25rem;}
        .tips-box{color: #a0a0a0;font-size: 0.6rem;overflow: hidden;padding: 0 0.5rem;}
        .tips-box div{border: 1px solid #ffba00;float: left;padding: 0.2rem 0.4rem;border-radius: 0.3rem;margin-right: 0.5rem;}
        .tips-box .iconfont{font-size: 0.6rem;margin-right: 0.2rem;}

        .list-group li{background-color: #323238;}
        .detail-item{padding-left: 0.5rem;padding-bottom: 0.8rem;}
        .detail-item .bottom-line{position: relative;font-size: 0.6rem;color: #929292;padding: 0.5rem 0;}
        .detail-item .bottom-line i{font-size: 0.6rem;}
        .address-box{position: relative;height: 1.3rem;line-height: 1.3rem;padding: 0.4rem 0.5rem 0.4rem 0;}
        .address-box .icon-zuobiao{float: left;color: #fbb701;font-size: 0.7rem;}
        .address-box .address{font-size: 0.65rem;line-height: 1.4rem;position: absolute;
            left: 1.2rem;right: 2rem;color: #929292;
            display: inline-block;text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}
        .address-box .icon-arrow{float: right;color: #fbb701;font-size: 0.7rem;}

        .coach{background-color: #323238;position: relative;padding: 0.5rem;display: -webkit-box;}
        .coach .face-img{width: 2.2rem;height: 2.2rem;}
        .coach .face-img img{display: block;width: 100%;height: 100%;}
        .coach .evaluate-item{-webkit-box-flex: 1;margin-left: 0.5rem;}
        .coach .evaluate-item .evaluate-title{overflow: hidden;line-height: 1.5rem;}
        .coach .evaluate-item .evaluate-title .name{float: left;font-size: 0.65rem;color: #fff;}
        .coach .evaluate-item .evaluate-detail{font-size: 0.7rem;color: #ccc;text-align: justify;line-height: 1rem;}

        .detail-words{background-color: #323238;color: #ccc;padding: 0.5rem;font-size: 0.7rem;text-align: justify;line-height: 1rem;}

        .footer{height: 2.5rem;margin-top: 0.5rem;}
        .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;}
        .footer-fixed a{display: block;background-color: #ffab00;line-height: 2.5rem;text-align: center;color: #fff;font-size: 0.8rem;}
    </style>
</head>
<body>
    <div class="container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/group_detail_img01.png" alt=""/></div>
                <div class="swiper-slide"><img src="img/group_detail_img01.png" alt=""/></div>
                <div class="swiper-slide"><img src="img/group_detail_img01.png" alt=""/></div>
            </div>
        </div>
        <div class="left-time">
            <div class="left">
                <p>剩余时间</p>
                <div class="timing">
                    <span>21</span> : <span>59</span> : <span>48</span>
                </div>
            </div>
            <div class="right">
                <div class="progress">
                    <p>4/12</p>
                    <div class="progress-bar"></div>
                </div>
                <span>3人开团</span>
            </div>
        </div>

        <div class="list-group">
            <ul>
                <li>
                    <p class="title">课程介绍</p>
                    <div class="content">
                        <p class="content-title">燃脂单车训练</p>
                        <p class="content-detail">这里填写课程的详情这里填写课程的详情这里填写课程的详情这里填写课程的详情这里填写课程的详情</p>
                    </div>
                    <div class="tips-box">
                        <div><i class="iconfont icon-biaoqian"></i><span>燃脂</span></div>
                        <div><i class="iconfont icon-biaoqian"></i><span>燃脂</span></div>
                    </div>
                    <div class="detail-item">
                        <div class="bottom-line">
                            <i class="iconfont icon-renminbi"></i>
                            <span>59/课时</span>
                        </div>
                        <div class="bottom-line">
                            <i class="iconfont icon-shijian"></i>
                            <span>3月19日 12:00 - 3月29日 12:00</span>
                        </div>
                        <div class="address-box">
                            <i class="iconfont icon-zuobiao"></i>
                            <span class="address">成都市武侯区都城雅颂（南区）荣华路29号</span>
                            <i class="iconfont icon-arrow"></i>
                        </div>
                    </div>
                </li>
                <li>
                    <p class="title">教练介绍</p>
                    <div class="coach">
                        <div class="face-img">
                            <img src="img/index_detail_img04.png" alt=""/>
                        </div>
                        <div class="evaluate-item">
                            <p class="evaluate-title">
                                <span class="name">Lazar</span>
                            </p>
                            <p class="evaluate-detail">你还在使用传统的哑铃、杠铃训练吗？你还在使用跑步机减肥吗？你还在因为锻炼枯燥而无法坚持吗？快来使用功能性训练来减脂锻炼吧！本课程使用绳梯、跨栏架、BOSU球、药球等功能训练器械进行训练，使你得训练更有趣、更有效让你爱上锻炼。</p>
                        </div>
                    </div>
                </li>
                <li>
                    <p class="title">开课规则</p>
                    <p class="detail-words">这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料</p>
                </li>
                <li>
                    <p class="title">训练效果</p>
                    <p class="detail-words">这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料</p>
                </li>
                <li>
                    <p class="title">适合人群</p>
                    <p class="detail-words">这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料</p>
                </li>
                <li>
                    <p class="title">注意事项</p>
                    <p class="detail-words">这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料这些都是资料</p>
                </li>
            </ul>
        </div>
    </div>
<footer class="footer">
    <div class="footer-fixed">
        <a href="">预约</a>
    </div>
</footer>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/swiper-3.3.1.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true
        //...
    });
</script>
</html>